<template>
  <div class="win-handler">
    <div class="win-handler-left">
      <div class="win-handler-logo-container" >
        <img :src="require('@/assets/images/logo/wallet.png')"
           onselectstart="return false;"
           class="win-handler-logo" />
      </div>
      <div class="tool"
           v-if="$route.name&&$route.name!=='login'&&$route.name!=='register'">
        <div class="menu">
          <div class="menu-label">{{user.name?user.name.substring(0,1).toUpperCase():''}}</div>
          <ul class="menu-list">
            <li>
              {{user.name}}
            </li>
            <li @click="handleCommand('settings')">
              {{$t('header.settings')}}
            </li>
            <li @click="handleCommand('signOut')">
              {{$t('header.signOut')}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="win-drag">
      <span>
        {{$t($route.meta.title)}}
      </span>
    </div>
    <div class="win-handler-button">
      <i class="iconfont icon-jianhao"
         @click="sendCommand('mini')"></i>
      <i class="iconfont" :class="{'icon-fuzhi':!isExpended,'icon-fangxingweixuanzhong':isExpended}"
         @click="sendCommand('expend')"></i>
      <i class="iconfont icon-guanbi1"
         @click="sendCommand('close')"></i>
    </div>
  </div>
</template>
<script>
import packageInfo from './../../../../package.json'
import { queryLoginUser } from '@/assets/api'
import { minimizeWindow, expendWindow, closeWindow } from '@/assets/api/index'
export default {
  data () { return { currentDate: new Date(), user: {}, isExpended: false } },
  watch: {
    $route (to, from) {
      if (this.$route.name === 'home') {
        this.getUserInfo()
      }
    }
  },
  mounted () {
    this.checkUpdate()
  },
  methods: {
    sendCommand (command) {
      if (command === 'expend') this.isExpended = !this.isExpended
      switch (command) {
        case 'mini':minimizeWindow(); break
        case 'expend':expendWindow(); break
        case 'close':closeWindow(); break
      }
    },
    getUserInfo () {
      queryLoginUser({}).then(res => {
        this.user = res.data
      })
    },
    handleCommand (command) {
      if (command === 'userCenter') {

      } else if (command === 'signOut') {
        localStorage.removeItem('token')
        this.$router.push({ path: '/' })
      } else if (command === 'settings') {
        this.$router.push({ path: 'settings' })
      }
    },
    checkUpdate () {
      fetch('https://gitee.com/api/v5/repos/Lucouse/PFMS-AllInOne/releases/latest', { method: 'GET', mode: 'cors' }).then(res => {
        return res.json()
      }).then(json => {
        if (json.name && packageInfo.version !== json.name) {
          const notification = new Notification(this.$t('windowTitleBar.updateNotify.title'), {
            body: this.$t('windowTitleBar.updateNotify.message1') + json.name + this.$t('windowTitleBar.updateNotify.message2') + this.$t('windowTitleBar.updateNotify.message3')
          })
          notification.onclick = () => {
            window.electron.shell.openExternal('https://lucouse.gitee.io/moneyKit/#/versionDetail?version=' + json.name)
          }
        }
      })
    }
  }
}
</script>
